import React, { Component } from 'react'
import { connect } from 'react-redux'
import moment from 'moment'
import _ from 'underscore'
import { Tag, Button, Form, Input, InputNumber, Icon, Cascader, Select, AutoComplete, Spin, Modal, message } from 'antd';
import { Tooltip, Row, Col, Checkbox } from 'antd';
const AutoCompleteOption = AutoComplete.Option;

import SearchSelect from 'react-select';
import 'react-select/dist/react-select.css';

import table from '../../charts/table'
import { merge, trim, ajax } from '../../helper/helper'
import { ContentHeader } from '../../wrapper'
import NewContact from './newContact';
import { actions } from '../action/action'
import Profile from '../../common/profile-for-table'
import { socialListTh, timeFilter, socialStatus, optionsList, subList1, subList2, profileList, userAttribute, } from '../static/index'
import ReactDropDown, { ReactDropDownFull, DropDownLevel, DropDownMultiLevel } from './dropdown'
import AttributeDropdown from '../../common/userprofilefilter';
import { tagsColor } from '../static/index';
import RouteConfig from "../router/router";

const FormItem = Form.Item;
const Option = Select.Option;

const attributeOption = {
    profileList: profileList,
    userAttribute: userAttribute
};

class RegistrationForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            confirmDirty: false,
            autoCompleteResult: [],
        }
    }

    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                Object.assign(this.props.submitEntity, values);
                this.props.updateEntity(this.props.submitEntity);
            }
        });
    }

    componentDidMount() {
        this.props.renderData({
            storeNo: user.storeNo
        });
    }

    render() {

        const { renderData, storeDetail } = this.props;
        const { getFieldDecorator } = this.props.form;
        const { autoCompleteResult } = this.state;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        const mTop = '50px';
        const mRight = '300px';

        const storeId = getFieldDecorator('storeId', {
                initialValue: storeDetail.storeId,
            })(<Input type="hidden"/>)

        const storeNo = getFieldDecorator('storeNo', {
                initialValue: storeDetail.storeNo,
            })(<Input type="hidden"/>)

        const storeLogo = getFieldDecorator('storeLogo', {
                initialValue: storeDetail.storeLogo,
            })(<Input type="hidden"/>)

        const storeBoardContent = getFieldDecorator('storeBoardContent', {
                initialValue: storeDetail.storeBoardContent,
            })(<Input type="hidden"/>)

        const remark = getFieldDecorator('remark', {
                initialValue: storeDetail.remark,
            })(<Input type="hidden"/>)


        return (

            <div className="userList">

                <ContentHeader title="钉店管理" icon="groups" sprite="standard-sprite" iconClassName="slds-icon-standard-contact-list" subtitle="">
                    {/*<Button type="primary" htmlType="submit">保存</Button>*/}
                </ContentHeader>

                <div className="main-div" >
                    <Form>

                        <FormItem
                            {...formItemLayout}
                            label="小店名称"
                        >
                            {getFieldDecorator('storeName', {
                                initialValue: storeDetail.storeName,
                                rules: [{
                                    required: true, message: '不能为空!',
                                }],
                            })
                            (
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="品牌名称"
                        >
                            {getFieldDecorator('brandName', {
                                initialValue: storeDetail.brandName,
                                rules: [{
                                    required: true, message: '不能为空!',
                                }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="地址"
                        >
                            {getFieldDecorator('location', {
                                initialValue: storeDetail.location,
                                rules: [{
                                    required: true, message: '不能为空!',
                                }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="联系方式 "
                        >
                            {getFieldDecorator('phoneNumber', {
                                initialValue: storeDetail.phoneNumber,
                                rules: [{
                                    required: true, message: '不能为空!',
                                }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="简介"
                        >
                            {getFieldDecorator('storeIntro', {
                                initialValue: storeDetail.storeIntro,
                                rules: [{
                                    required: true, message: '不能为空!',
                                }],
                            })(
                                <Input.TextArea autosize="true"/>
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="模板类型"
                        >
                            {getFieldDecorator('templateId', {
                                initialValue: storeDetail.templateId,
                                rules: [{
                                    required: true, message: '请选择模板类型!',
                                }],
                            })(
                                <Select placeholder="请选择模板类型" style={{ width: 120 }} >
                                    <Option key="1" value="theme_default">默认模板</Option>
                                    <Option key="2" value="theme_simple">简约模板</Option>
                                </Select>
                            )}
                        </FormItem>
                        <FormItem
                            wrapperCol={{
                                xs: { span: 24, offset: 0 },
                                sm: { span: 16, offset: 8 },
                            }}
                        >
                            <Button type="primary" onClick={ this.handleSubmit.bind(this)} >保存</Button>
                        </FormItem>

                    </Form>
                </div>
            </div>
        );
    }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);

const _RegistrationForm = connect(
    state => {
        return {
            storeDetail: state.storeDetail,
            submitEntity: state.submitEntity
        }
    },
    dispatch => {
        return {
            renderData: (storeNo) => {
                actions.renderData(dispatch, storeNo, (data) => {
                    if (data.success) {
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                })
            },
            updateEntity: (entity) => {
                actions.updateEntity(entity, (response)=>{
                    const a = response;
                    if(response.success){
                        //const result = JSON.parse(response);
                        message.success('操作成功');
                        setTimeout(function(){
                            location.reload()
                        }, 1500)
                    }
                });
            }
        }
    }
)(WrappedRegistrationForm);

export default _RegistrationForm;